<template>
	<view class="mainconent">
		<!-- 展示表单 -->
		<view class="ocrForm">
			<u--form labelPosition="left" :model="userInfo" ref="uForm">
				<u-form-item :labelStyle="{display:'none',margin:'20rpx'}" prop="userInfo.name" ref="item1">
					<u--input v-model="userInfo.name" border="bottom" placeholder="姓名" prefixIconStyle="text-align: left !important;"></u--input>
				</u-form-item>
				<u-form-item :labelStyle="{display:'none',margin:'20rpx'}" prop="userInfo.phone" ref="item2">
					<u--input v-model="userInfo.phone" border="bottom" placeholder="手机号码"></u--input>
				</u-form-item>
				<u-form-item :labelStyle="{display:'none',margin:'20rpx'}" prop="userInfo.region" ref="item3">
					<u--input v-model="userInfo.region" border="bottom" placeholder="所在地区(选择或定位当前位置)" suffixIcon="map-fill"
	    suffixIconStyle="color: #909399"></u--input>
				</u-form-item>
				<u-form-item :labelStyle="{display:'none',margin:'20rpx'}" prop="userInfo.detailAddress"
					ref="item4">
					<u--input v-model="userInfo.detailAddress" border="bottom" placeholder="详细地址(街道/门牌号)"></u--input>
				</u-form-item>
				<u-form-item :labelStyle="{display:'none',margin:'20rpx'}" prop="userInfo.moren" ref="item5">
					<u-checkbox-group v-model="radiovalue1" placement="column" @change="groupChange" shape="circle">
					  <u-checkbox
					    :label="label"
					    name="默认值"
					  >
					  </u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u--form>
		</view>
		<!-- 文本域输入框 -->
		<view class="ocrForm" style="margin-top: 20rpx;">
			<u--form labelPosition="left" :model="userInfo" ref="uForm">
				<u-form-item :labelStyle="{display:'none',margin:'20rpx'}" prop="userInfo.name" ref="item1">
					<u--textarea count v-model="value2" placeholder="粘贴文本可自动识别姓名、手机与地址。如：张三、138xxxxxxxx、北京市东城区建国门17号" height="120"></u--textarea>
				</u-form-item>
			</u--form>
			<view class="bottomBtn">
				<span class="clear" @click="clear">清空</span>
				<span class="ocrAi" @click="smartOCR">智能识别</span>
			</view>
		</view>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue1: '',
				userInfo: {
					name: '',
					phone: '',
					region: '',
					detailAddress: '',
					moren: ''
				},
				value2: '',
				toast: {
					type: "error",
					icon: false,
					title: "失败主题",
					message: "请根据提示，输入正确格式的文本",
				},
				label:'设为默认'
			}
		},
		mounted() {
			uni.getClipboardData({
				success: (res) => {
					if(res.data.includes('、')){
						this.value2 = res.data;
					}
				}
			})
		},
		methods: {
			// 智能识别方法
			parseContactInfo(str) {
				const parts = str.split('、');
				if (parts.length < 3) {
					this.showToast(this.toast)
					// throw new Error('输入字符串格式不正确');
				}
				const [name, phone, fullAddress] = parts;
				// 更精确的地址解析
				const addressRegex = /^(.+?(?:省|自治区|直辖市))?(.+?(?:市|自治州))?(.+?(?:区|县|旗|市))?(.*)$/;
				const match = fullAddress.match(addressRegex);
				let region = '';
				let detailAddress = fullAddress;
				if (match) {
					// 拼接省市区
					region = [match[1], match[2], match[3]].filter(Boolean).join('');
					detailAddress = match[4] || detailAddress;
				}
				return {
					name,
					phone,
					region,
					detailAddress,
					fullAddress
				}
			},
			smartOCR() {
				this.userInfo = this.parseContactInfo(this.value2)
			},
			clear(){
				this.value2 = ''
				this.userInfo = {
					name: '',
					phone: '',
					region: '',
					detailAddress: '',
					moren: ''
				}
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						console.log('123');
					},
				})
			},
			groupChange(n) {
				console.log('groupChange', n);
				if(n.length){
					this.label = '已设为默认'
				}else{
					this.label = '设为默认'
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.mainconent {
		background: #efefef;
		border-radius: 20rpx;
	}

	.ocrForm {
		padding: 20rpx;
		padding-bottom: 0;
		background: #fff;
		border-radius: 20rpx;
	}

	.bottomBtn {
		font-size: 22rpx;
		position: relative;
		bottom: 68rpx;
		left: 30rpx;
		z-index: 99;

		.ocrAi {
			color: #fff;
			background: #265ad1;
			padding: 10rpx 20rpx;
			border-radius: 28rpx;
			margin-left: 30rpx;
		}

		.clear {
			color: #999;
		}
	}
</style>